<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <!-- <a-col :span="24">
              <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                <a-input v-model="model.name" placeholder="请输入名称"></a-input>
              </a-form-model-item>
            </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="归属项目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
              <a-select
                :options="levelOneOptions"
                v-model="model.projectId"
                placeholder="请选择归属项目"
                @change="changeLevelOne"
              ></a-select>
              <!-- <span style="color: red; font-size: 16px">请选择所属项目,此项为必填</span> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
              <a-select
                :options="levelTwoOptions"
                v-model="model.departId"
                placeholder="请选择设备名称"
                @change="changeLevelTwo"
              ></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
              <a-select
                :options="levelTwoOptions"
                v-model="model.departId"
                placeholder="请选择设备类型"
                @change="changeLevelTwo"
              ></a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="规格型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
              <a-input :options="levelThreeOptions" v-model="model.userId" placeholder="请输入规格型号"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="设备位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
              <a-input :options="levelThreeOptions" v-model="model.userId" placeholder="请输入设备位置"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
              <a-input :options="levelThreeOptions" v-model="model.userId" placeholder="请输入类型"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" style="margin-right: 500px;">
            <a-form-model-item label="租借状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departId">
                <a-select
                :options="levelTwoOptions"
                v-model="model.departId"
                placeholder="请选择设备名称"
                @change="changeLevelTwo"
              ></a-select>
            </a-form-model-item>
          </a-col>

          <h2 style="font-weight: bold">租借明细</h2>
          <j-vxe-table
            ref="vTable"
            :height="580"
            :loading="loading"
            :dataSource="dataSource"
            :columns="columns"
            style="margin-top: 8px"
            @valueChange="handleValueChange"
          >
          </j-vxe-table>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>
  
  <script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue } from '@/utils/util'
import { JVXETypes } from '@/components/jeecg/JVxeTable'

export default {
  name: 'WtWarehouseForm',
  components: {},
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      model: {
        departId: '',
        userId: '',
        projectId: '',
      },
      columns: [
        {
          title: '租借日期',
          // align:"center",
          key: 'createTime',
          type: JVXETypes.normal,
          align: 'center',
        },
        {
          title: '租借单号',
          type: JVXETypes.normal,
          // align:"center",
          key: 'createTime',
          align: 'center',
        },
        {
          title: '归还日期',
          type: JVXETypes.datetime,

          key: 'createTime',
          align: 'center',
        },
        {
          title: '租借人',
          type: JVXETypes.normal,
          // align:"center",
          key: 'createTime',

          align: 'center',
        },
        {
          title: '原设备位置',
          type: JVXETypes.normal,
          // align:"center",
          key: 'createTime',

          align: 'center',
        },
        {
          title: '租借单位',
          // align:"center",
          type: JVXETypes.normal,
          key: 'createTime',

          align: 'center',
        },
        {
          title: '租借设备位置',
          type: JVXETypes.normal,
          // align:"center",
          key: 'createTime',
          align: 'center',
        },
        // {
        //   title:'数量',
        //   align:"center",
        //   dataIndex: 'num'
        // },
        //    {
        //      title: '操作',
        //      dataIndex: 'action',
        //      align:"center",
        //      fixed:"right",
        //      width:210,
        //      scopedSlots: { customRender: 'action' }
        //    }
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: { projectId: [{ required: true, message: '请选择项目!' }] },
      // housenameList: [],
      // housenameData: [],
      treeData1: [],
      // treeData2: [],
      // treeData3: [],
      levelOneOptions: [],
      // levelTwoOptions: [],
      // levelThreeOptions: [],
      dataSource: [],

      url: {
        list: '/materials/wtMaterials/detail/list',
        add: '/materials/wtWarehouse/add',
        edit: '/materials/wtWarehouse/edit',
        queryById: '/materials/wtWarehouse/queryById',
      },
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {
    //备份model原始值
    this.modelDefault = JSON.parse(JSON.stringify(this.model))
    this.loadTree()
  },
  methods: {
    add() {
      this.edit(this.modelDefault)
    },
    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true

      // getAction(this.url.list).then((res) => {
      //   if (res.success) {
      //     console.log(res)
      //     this.housenameData = []
      //     let treeList1 = res.result.records
      //     for (let a = 0; a < treeList1.length; a++) {
      //       let temp = treeList1[a]
      //       temp.isLeaf = temp.leaf
      //       this.housenameData.push(temp)
      //     }
      //     this.housenameList = [...this.housenameData].map((v) => {
      //       return {
      //         ...v,
      //         value: v.id,
      //         label: v.realname,
      //       }
      //     })

      //   }

      // })
      // getAction(`/sys/sysDepart/getDepartListByParentId?parentId=${this.model.projectId}`).then(res => {
      //   if (res.success) {

      //     this.treeData2 = []
      //     let treeList2 = res.result
      //     for (let a = 0; a < treeList2.length; a++) {
      //       let temp = treeList2[a]
      //       temp.isLeaf = temp.leaf
      //       this.treeData2.push(temp)
      //     }

      //     this.levelTwoOptions = [...this.treeData2].map((v) => {
      //       return {
      //         ...v,
      //         value: v.id,
      //         label: v.departName,
      //       }
      //     })
      //   }
      // })
      // getAction(`/sys/sysDepart/getUsersByDepartId?id=${this.model.departId}`).then((res)=>{
      //            if (res.success) {

      //         this.treeData3 = []
      //         let treeList3 = res.result
      //         for (let a = 0; a < treeList3.length; a++) {
      //           let temp = treeList3[a]
      //           temp.isLeaf = temp.leaf
      //           this.treeData3.push(temp)
      //         }

      //         this.levelThreeOptions = [...this.treeData3].map((v) => {
      //           return {
      //             ...v,
      //             value: v.id,
      //             label: v.realname,
      //           }
      //         })

      //       }
      //     })
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() //查询条件
      this.loading = true
      getAction(this.url.list, params)
        .then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            this.dataSource = res.result.records || res.result
            if (res.result.total) {
              this.ipagination.total = res.result.total
            } else {
              this.ipagination.total = 0
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    // changeLevelOne(val) {
    //   // this.clearForm()
    //   this.model.departId = this.model.userId = ''
    //   this.levelThreeOptions = []
    // //  console.log('gfedw',val);

    //  this.getList('parentId', val)
    // },
    // changeLevelTwo(val) {
    //   // this.clearForm()
    //   this.model.userId = ''
    //   this.getList1('id', val)

    // },
    // getList(category, id) {
    //   getAction(`/sys/sysDepart/getDepartListByParentId?${category}=${id}`).then(res => {
    //     if (res.success) {

    //       this.treeData2 = []
    //       let treeList2 = res.result
    //       for (let a = 0; a < treeList2.length; a++) {
    //         let temp = treeList2[a]
    //         temp.isLeaf = temp.leaf
    //         this.treeData2.push(temp)
    //       }
    //      console.log('fdew',this.treeData2);
    //       this.levelTwoOptions = [...this.treeData2].map((v) => {
    //         return {
    //           ...v,
    //           value: v.id,
    //           label: v.departName,
    //         }
    //       })
    //     }
    //   })

    // },
    // getList1(category, id) {

    //   getAction(`/sys/sysDepart/getUsersByDepartId?${category}=${id}`).then((res)=>{
    //              if (res.success) {

    //           this.treeData3 = []
    //           let treeList3 = res.result
    //           for (let a = 0; a < treeList3.length; a++) {
    //             let temp = treeList3[a]
    //             temp.isLeaf = temp.leaf
    //             this.treeData3.push(temp)
    //           }

    //           this.levelThreeOptions = [...this.treeData3].map((v) => {
    //             return {
    //               ...v,
    //               value: v.id,
    //               label: v.realname,
    //             }
    //           })

    //         }
    //       })
    // },
    // clearForm(){
    //   this.model.departId=this.model.depid=this.model.userId  = ''
    // },
    loadTree() {
      getAction(`/sys/sysDepart/getDepartByOrgType?orgType=1`).then((res) => {
        if (res.success) {
          this.treeData1 = []
          let treeList1 = res.result
          for (let a = 0; a < treeList1.length; a++) {
            let temp = treeList1[a]
            temp.isLeaf = temp.leaf
            this.treeData1.push(temp)
          }

          this.levelOneOptions = [...this.treeData1].map((v) => {
            return {
              ...v,
              value: v.id,
              label: v.departName,
            }
          })
        }
      })
    },
    submitForm() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          // this.model.departId=this.model.id
          console.log('dewq', this.model)
          httpAction(httpurl, this.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
  },
}
</script>